<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{margin: 0;padding:0;}
    </style>
</head>
<body>
    <div id="birthday">点击选择</div>
    <script src="./scripts/picker.min.js"></script>
    <script>
        let date = new Date()
        , startY = 1800
        , endY = 2300
        , curYear = date.getFullYear()
        , curMonth = date.getMonth()
        , curDay = date.getDate()
        , getDays = function(y,m){
            return new Date(y,m,0).getDate();
        }
        ,addZero = function(num){
            return num<10 ? "0"+num : num;
        }
        , years = function(startY,endY){
            let y = []
            for(let i = startY; i <= endY; i++){
                y.push({text:i+'年',value:i})
            }
            return y;
        }(startY,endY)
        , months = function(){
            let m = [];
            for(let i = 1; i <= 12; i++){
                m.push({text:addZero(i)+'月',value:i})
            }
            return m;
        }()
        , days = function(days){
            let d = [] 
            days = days||getDays(curYear,curMonth+1)
            for(let i = 1; i <= days; i++){
                d.push({text:addZero(i)+'日',value:i})
            }
            return d;
        }()

        ,getDate = function(days){
            let d = [] 
            days = days||getDays(curYear,curMonth+1)
            for(let i = 1; i <= days; i++){
                d.push({text:addZero(i)+'日',value:i})
            }
            return d;
        }

        , birthday = new Picker({
            data: [years, months, days]
            ,selectedIndex: [curYear-startY,curMonth,curDay-1]
        })

        , el = document.querySelector("#birthday")
        
        , callback = {
            "0":function(selectedIndex){
               curYear = years[selectedIndex].value
            }
            ,"1":function(selectedIndex){
                curMonth = months[selectedIndex].value
                let maxDay = getDays(curYear,curMonth)
                days = getDate(maxDay)
                this.refillColumn(2,days)
                this.scrollColumn(2, Math.min(curDay,maxDay)-1)
            }
            ,"2":function(selectedIndex){
                curDay = days[selectedIndex].value
            }
        };

        el.addEventListener('touchend',function(){
            birthday.show()
        })

        birthday.on('picker.select', function (selectedVal, checkedIndex) {
            el.innerText = years[checkedIndex[0]].text +'-'+ months[checkedIndex[1]].text +'-'+ days[checkedIndex[2]].text;
        });
        birthday.on('picker.change', function (index, selectedIndex){
            callback[index].call(this,selectedIndex)
        });
    </script>
</body>
</html>